<template>
  <div id="app">
    <header class="app-header">
      <label style="font-size: 20px">医学数据分析系统-HSL</label>
    </header>
    <main style="height: calc(100% - 40px)">
      <keep-alive :include="['DataTablePage']">
        <router-view/>
      </keep-alive>
    </main>
    <footer>
      <p>&copy; {{ new Date().getFullYear() }} 版权所有@风天乐</p>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 10px;
}

.app-header {
  margin: 10px;
}

nav {
  margin-top: 20px;
}

nav a {
  margin: 0 10px;
  color: #42b983;
  text-decoration: none;
}

nav a.router-link-exact-active {
  color: #35495e;
  font-weight: bold;
}

footer {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #eee;
}
</style>
